// base
import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
// redux
import { connect } from '@tarojs/redux'
import { DOREQUESTCHOOSEWORKNATURE } from './store/actions/pagechooseworknature'
import { UPDATEPAGECHOOSEWORKNATURE } from './store/types/pagechooseworknature'
import { UPDATEBASEUSERINFO } from '../../store/types/baseuserinfo'
// less
import './index.less'

// componnet
import BtmFixedBtn from '../../components/page-components/btm-fixed-btn'
import { UPDATEPAGEEDITJOBINTENTION } from '../edit-job-intention/store/types/pageeditjobintention'
import { showToast } from '../../crossplatform/apiservice/toast'
import { navigateBack, redirectTo } from '../../crossplatform/apiservice/navigate'
import pagejumplist from '../../configuration/pagejumplist.json'

const mapActiontoProps = dispatch => ({
  updateState(payload) {
    dispatch({
      type: UPDATEPAGECHOOSEWORKNATURE,
      payload: {
        ...payload
      }
    })
  },
  updateEditJobIntentionState(payload) {
    dispatch({
      type: UPDATEPAGEEDITJOBINTENTION,
      payload: {
        ...payload
      }
    })
  },
  dorequest() {
    return new Promise(resolve => {
      let promise = DOREQUESTCHOOSEWORKNATURE()
      dispatch(promise)
      promise.payload.then(data => {
        resolve(data)
      })
    })
  },
  updateBaseUserState(payload) {
    dispatch({
      type: UPDATEBASEUSERINFO,
      payload: {
        ...payload
      }
    })
  }
})

@connect(
  ({ pagechooseworknature, pageeditjobintention, baseuserinfo }) => ({
    ...pagechooseworknature,
    baseuserinfo,
    workNature: pageeditjobintention.workNature
  }),
  mapActiontoProps
)
class ChooseWorkNature extends Component {
  config = {
    navigationBarTitleText: '求职意向'
  }

  constructor(props) {
    super(props)
    this.jobList = [
      {
        name: '兼职',
        bgUrl: 'https://imagesize.hrwork.com/sp/files/99f0aa7b-0e87-4470-bb15-042e1145aee0.png'
      },
      {
        name: '实习',
        bgUrl: 'https://imagesize.hrwork.com/sp/files/f6d30d1e-1379-497b-8a21-d537cee2a8d0.png'
      },
      {
        name: '全职',
        bgUrl: 'https://imagesize.hrwork.com/sp/files/cd520dc4-5e36-4622-8783-06ed6d5b88e0.png'
      }
    ]
    this.state = {
      jobChosedIndex: this.getJobChosedIndex(),
      isBaseInfo: ''
    }
  }

  getJobChosedIndex = () => {
    const { workNature } = this.props
    let index = this.jobList.findIndex(item => {
      return item.name === workNature[0]
    })
    this.chosedIndex = index > 0 ? index : 0
    return index
  }

  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentDidShow() {
    // onshow
    this.queryWarp()
  }

  queryWarp = () => {
    // 判断是否是基本信息进入
    const { isBaseInfo } = this.$router.params
    this.setState({
      isBaseInfo
    })
  }

  componentDidHide() {
    // onhide
  }

  componentWillUnmount() {
    // onUnload
  }

  onClickWork = index => {
    this.setState({
      jobChosedIndex: index
    })
  }

  render() {
    const { jobChosedIndex, isBaseInfo } = this.state
    return (
      <View className="ChooseWorkNature_id86561">
        <View className="top-title">
          <View className="title">
            <View className="title-text">工作性质</View>
            {/* <View className="title-btn" onClick={this.getSubmitData}>保存</View> */}
          </View>
          <View className="desc">*选择自己适合的工作性质，可选1个哦！</View>
        </View>

        <View className="choose-list">
          {this.jobList.map((item, index) => {
            return (
              <View className="list-item" onClick={this.onClickWork.bind(this, index)} key={index}>
                <View className="item-top">
                  <View className={`item-top-text text-shadow-${index}`}>{item.name}</View>
                  <Image className="item-top-img" src={item.bgUrl} />
                </View>
                <Image
                  className={`item-bottom ${index == jobChosedIndex ? 'choosed' : ''}`}
                  src="https://imagesize.hrwork.com/sp/files/a50b0a95-725c-4788-a280-e1163ae653d5.png"
                />
              </View>
            )
          })}
        </View>

        <BtmFixedBtn text={isBaseInfo ? '下一步' : '完成'} onTap={this.chooseCompleted} />
      </View>
    )
  }

  /**
   * 选择完成
   */
  chooseCompleted = () => {
    const { jobChosedIndex, isBaseInfo } = this.state
    const { updateEditJobIntentionState, baseuserinfo } = this.props
    if (isBaseInfo) {
      // 从基本信息进入页面
      const { userInfoC } = baseuserinfo
      this.props.updateBaseUserState({
        userInfoC: {
          ...userInfoC,
          jobIntention: {
            ...userInfoC.jobIntention,
            workNature: [this.jobList[jobChosedIndex].name]
          }
        }
      })
      // 跳转到工作区域页面
      redirectTo({
        url: `${pagejumplist['choose-job-area'].path}?isBaseInfo=${isBaseInfo}`
      })
    } else {
      // 正常进入页面
      if (jobChosedIndex >= 0) {
        // if (this.chosedIndex !== jobChosedIndex) {
        updateEditJobIntentionState({
          workNature: [this.jobList[jobChosedIndex].name]
        })
        // }
        navigateBack()
      } else {
        // 没有选择
        showToast({
          title: '请选择1个工作性质'
        })
      }
    }
  }
}

export default ChooseWorkNature
